<template>
  <div>
    <!--左 上下-->
    <el-row type="flex">
      <el-col :md="18" :xs="24">
        <div class="article-left">
          <el-card>
            <div class="article-title">
              <h1>{{data.title}}</h1>
              <div class="article-count">
                <nuxt-link :to="`/user/${data.userId}`" target="_blank">
                  <i class="el-icon-user-solid">{{data.nickName}}&nbsp; &nbsp;</i>
                </nuxt-link>

                <span>
                <i class="el-icon-date">{{getDateFormate(data.updateDate)}}&nbsp; &nbsp;</i>
                <i class="el-icon-thumb">{{data.thumhup}}&nbsp; &nbsp;</i>
                <i class="el-icon-view">{{data.viewCount}}&nbsp; &nbsp;</i>
                </span>

                <nuxt-link v-if="$store.state.userInfo && $store.state.userInfo.id === data.creator "
                           :to="{path: '/article/edit', query: {id: data.id} }" class="nickname">
                  编辑
                </nuxt-link>
              </div>

              <el-tag style="margin: 5px" v-for="item in data.labelList" :key="item.id" size="small">{{item.name}}
              </el-tag>

            </div>
            <div class="article-content">
              <div class="markdown-body" v-html="data.htmlContent"></div>
            </div>
            <!-- plain为true，背景不是深蓝色，为false是深蓝色 -->
            <el-button @click="handleThumb" icon="el-icon-thumb"
                       type="primary" size="medium" :plain="!isThumb">
              赞
            </el-button>
          </el-card>
          <div>
            <h2>评论区</h2>
            <el-card v-if="!$store.state.userInfo">
              <h4>登录后参与交流、获取后续更新提醒</h4>
              <div>
                <el-button @click="$store.dispatch('loginPage')" type="primary" size="small">登录</el-button>
                <el-button @click="$store.dispatch('loginPage')" type="primary" size="small" plain>注册</el-button>
              </div>
            </el-card>
            <el-card>
              <comment userId="userId" :userImage="userImage"
                       :authorId="data.creator" :showComment="$store.state.userInfo ? true: false"
                       :commentList="commentList"
                       @doSend="doSend" @doChildSend="doChildSend" @doRemove="doRemove"
              >

              </comment>
            </el-card>
          </div>
        </div>
      </el-col>
      <el-col class="hidden-sm-and-down" :md="6">
        <el-row>
          <el-col>
            <affix :offset="80">
              <directory parentClass="article-content">
              </directory>
            </affix>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {dateFormat} from '@/utils/date.js'
  //固钉
  import affix from '@/components/Affix/index.vue'
  //目录
  import directory from '@/components/Directory/index.vue'
  //评论组件
  import comment from '@/components/Comment'

  export default {
    components: {
      affix,
      directory,
      comment
    },
    // 校验路由参数是否有效
    validate({params}) {
      const id = params.id ? params.id : 0
      // 必须是数值
      return /^\d+$/.test(id)
    },

    data() {

      return {
        //是否点赞
        isThumb: this.$cookies.get(`article-thumb-${this.$route.params.id}`) || false,
        userId: this.$store.state.userInfo && this.$store.state.userInfo.id,
        //    当前登录用户头像url
        userImage: this.$store.state.userInfo && this.$store.state.userInfo.imageUrl,
        //commentList: []
      }
    },
    methods: {
      getDateFormate(date) {
        return dateFormat(date)
      },
      // 点赞
      async handleThumb() {
        // 取消点赞或者点赞
        this.isThumb = !this.isThumb
        console.log("this.isThumb" + this.isThumb)
        // 1. 点赞，-1取消赞
        const count = this.isThumb ? 1 : -1
        console.log("count" + this.isThumb)
        // 获取文章
        const articleId = this.$route.params.id
        const {code} = await this.$updateArticleThumbById(articleId, count)
        if (code === 200) {
          // 更新下当前文章页面显示的点赞数
          this.data.thumhup = this.data.thumhup + count
          // 保存cookie，永久保存
          this.$cookies.set(`article-thumb-${this.$route.params.id}`, this.isThumb, {
            maxAge: 60 * 60 * 24 * 365 * 5 // 保存5年
          })
         this.refreshArticle();
        }
      },
      //发布评论
      async doSend(content) {
        console.log("发布评论" + content)
        this.doChildSend(content)
      },
      //发布回复评论
      async doChildSend(content, parentId = -1) {
        console.log("发布回复评论" + content + parentId)
        const data = {
          content,
          parentId: parentId,
          articleId: this.$route.params.id,
          userId: this.userId,
          userImage: this.userImage,
          nickName: this.$store.state.userInfo.nickName
        }
        this.$addComment(data).then(response => {
          if (response.code == 200) {
            //刷新评论信息
            this.refreshComment()
          }
        })
      },
      //删除评论
      async doRemove(id) {
        console.log("删除评论" + id)
        const {code} = await this.$deleteCommentById(id);
        if (code == 200) {
          this.refreshComment();
        }
      },
      //刷新评论信息
      async refreshComment() {
        const {data: commentList} = await this.$getCommentByArticleId(this.$route.params.id)
        this.commentList = commentList;
      },
      async refreshArticle() {
        const {data} = await app.$getArticleById(articleId)
        this.data = data;
      }

    },
    async asyncData({params, app}) {
      const articleId = params.id ? params.id : null
      const {data} = await app.$getArticleById(articleId)

      //更新浏览数 将本次查询文章的id 保存到cookie 若cookie不存在则更新
      //当浏览器关闭后会自动将此文章的cookie清除

      const isView = app.$cookies.get(`article-view-${articleId}`);
      if (!isView) {
        //没有值 则更新浏览数
        const {code} = await app.$updateArticleViewCountById(articleId)
        if (code == 200) {
          //将此文章浏览数+1
          data.viewCount++
          //保存到cookies
          app.$cookies.set(`article-view-${articleId}`, true)
        }
      }
      console.log("文章详情的用户id" + data.userId)
      //通过文章id 查询所有评论列表信息
      const {data: commentList} = await app.$getCommentByArticleId(params.id)
      console.log("code=" + data.code + "commentList=" + data.commentList)
      return {data, commentList}
    },
  }
</script>

<style scoped>
  /*  //高亮显示样式*/
  @import "assets/css/md/github-markdown.css";
  @import "assets/css/md/github-min.css";
  @import "assets/css/blog/article.css";
</style>
